import React, { useState } from 'react'
import { Popup, Cell } from 'react-vant'
import { Arrow, Like } from '@react-vant/icons'
import { Card, Image, Button, Toast, Space } from 'react-vant'
import Navbars from './Navbar'
import { useDispatch } from 'react-redux'
import { async_addshoplist } from '../store/Slice'

export default function Poput(props: any) {

    const [visible, setVisible] = useState(false)

    let dispatch = useDispatch()

    return (
        <div>
            <Cell title='展示弹出层' isLink />
            <Popup visible={props.visible}>
                <div style={{ width: '100vw', height: '100vh' }}>
                    {/* 顶部返回 */}
                    {/*  <div>
                        <Navbars></Navbars>
                    </div> */}
                    {/* 卡片组件 渲染数据 */}
                    <>
                        <Card round style={{ marginBottom: 20 }}>
                            <Card.Cover>
                                <div style={{ height: '60vh', padding: '5px' }}>
                                    <Image src={props.itemobj.img} />
                                </div>
                            </Card.Cover>
                            <Card.Header
                                extra={<Arrow />}
                            >
                                {props.itemobj.title}
                            </Card.Header>
                            <Card.Body>
                                {props.itemobj.price}
                            </Card.Body>
                            <Card.Footer>
                                <Space>
                                    <Button round size='small' onClick={() => {
                                        props.setVisible(false)
                                    }}>
                                        更多
                                    </Button>
                                    <Button
                                        icon={<Like />}
                                        round
                                        color='linear-gradient(to right, #ff6034, #ee0a24)'
                                        size='small'
                                        onClick={() => {
                                            let obj = {
                                                ...props.itemobj
                                            }
                                            dispatch(async_addshoplist(obj))
                                        }}
                                    >
                                        加入购车
                                    </Button>
                                </Space>
                            </Card.Footer>
                        </Card>
                    </>

                </div>
            </Popup>
        </div>
    )
}
